<template>
  <basic-container :btnFlag = true>
      <div class="grid">
        <span  @click="activeId=1" :class="activeId===1?'actived':'unactived'">
          <el-badge class="item">
            已办规划
          </el-badge>
        </span>
         <span  @click="activeId=2" :class="activeId===2?'actived':'unactived'">
          <el-badge class="item">
            已办清单
          </el-badge>
        </span>
         <span  @click="activeId=3" :class="activeId===3?'actived':'unactived'">
          <el-badge  class="item">
            会商反馈
          </el-badge>
        </span>
        <span  @click="activeId=4" :class="activeId===4?'actived':'unactived'">
          <el-badge class="item">
            审核审批
          </el-badge>
        </span>
        <span  @click="activeId=5" :class="activeId===5?'actived':'unactived'">
          <el-badge class="item">
            意见反馈
          </el-badge>
        </span>
         <span  @click="activeId=6" :class="activeId===6?'actived':'unactived'">
          <el-badge class="item">
            课题征集
          </el-badge>
        </span>
         <span  @click="activeId=7" :class="activeId===7?'actived':'unactived'">
          <el-badge class="item">
            材料收集
          </el-badge>
        </span>
        <span  @click="activeId=8" :class="activeId===8?'actived':'unactived'">
          <el-badge  class="item">
            规划衔接
          </el-badge>
        </span>
    </div>
    <div class="flex-start-div">
      <div class="flex-start">
        <span  @click="activeId=9" :class="activeId===9?'actived':'unactived'">
          <el-badge  class="item">
            结题申请
          </el-badge>
        </span>
      </div>
    </div>
        <my-project v-show="activeId===1"></my-project>
        <reply v-show="activeId===2"></reply>
        <discussion-finished v-show="activeId===3"></discussion-finished>
        <todo-reviewfinished v-show="activeId===4"></todo-reviewfinished>
        <todo-opinionfinished v-show="activeId===5"></todo-opinionfinished>
        <todo-subjectfinished v-show="activeId===6"></todo-subjectfinished>
        <todo-collectionfinish v-show="activeId===7"></todo-collectionfinish>
        <todo-connectionfinished v-show="activeId===8"></todo-connectionfinished>
        <todo-endsubjectfinished v-show="activeId===9"></todo-endsubjectfinished>
  </basic-container>
</template>
<script>
import myProject from '@/views/planning/project/myProject'
import reply from '@/views/planning/detailedList/reply'
import discussionFinished from '@/views/planning/project/discussionFinished'
import todoReviewfinished from '@/views/review/toDoReviewFinished'
import todoOpinionfinished from '@/views/opinion/toDoOpinionfininshed'
import todoSubjectfinished from '@/views/subject/todoSubjectfinished'
import todoCollectionfinish from '@/views/fileTask/todoCollectionfinish'
import TodoConnectionfinished from "@/views/make/todoConnectionfinished";
import todoWorkitem from "@/views/pim/todoWorkItem";
import todoEndsubjectfinished from '@/views/subject/todoEndsubjectfinished'
export default {
  components: {
    myProject,
    reply,
    discussionFinished,
    todoReviewfinished,
    todoOpinionfinished,
    todoSubjectfinished,
    todoCollectionfinish,
    TodoConnectionfinished,
    todoWorkitem,
    todoEndsubjectfinished,
  },
  name: "finished",
  data() {
    return {
      activeId:1,
    };
  }
};
</script>

<style lang="scss" scoped>
  .grid {
    display: flex;
    justify-content: space-between;
    text-align: center;
  }
  .flex-start-div{
    display: flex;
    justify-content: space-between;
  }
  .flex-start{
    width: 50%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-right: 7px;
  }
span{
  width: 120px;
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  font-size: 20px;
  color: #303133;
  display: block;
  cursor: pointer;
}
.actived{
  background: #409EFF;
  color: #fff;
  position: relative;
}
.unactived:hover{
    color: #409EFF
  }
  
 /deep/.el-badge{
   vertical-align:baseline
  }
</style>





